<script setup lang="ts">
// import PanelGroup from './components/PanelGroup.vue'
// import { ElRow, ElCol, ElCard, ElSkeleton, ElButton } from 'element-plus'
// import { Echart } from '@/components/Echart'
// import { pieOptions, barOptions, lineOptions } from './echarts-data'
import { ref, reactive } from 'vue'
// import {
//   getUserAccessSourceApi,
//   getWeeklyUserActivityApi,
//   getMonthlySalesApi
// } from '@/api/dashboard/analysis'
// import { set } from 'lodash-es'
// import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter } from 'vue-router'
import { ContentWrap } from '@/components/ContentWrap'
// import { useGuide } from '@/hooks/web/useGuide'
import {
  getUpCurrentMonthReportApi,
  getCurrentYearReportApi,
  getCurrentThreeDayReportApi,
  getQualityReportRankingApi
} from '@/api/screen'
import { ElTable, ElTableColumn, ElMessage, ElButton, ElSpace } from 'element-plus'
import * as XLSX from 'xlsx'
const { t } = useI18n()
// const { drive } = useGuide()

// const guideStart = () => {
//   drive()
// }

const date = new Date()
const currentYear = date.getFullYear()
const currentMonth = date.getMonth() + 1

const currentMonthReport = ref<any>([])
const currentYearReport = ref<any>([])
const ThreeDayReport = ref<any>([])
const QualityReport = ref<any>([])
// 本月违章查处明细报表
const getCurrentMonthReport = async () => {
  const res = await getUpCurrentMonthReportApi()
  if (res) {
    currentMonthReport.value = res.data
  }
}
// 本年违章查处明细报表
const getCurrentYearReport = async () => {
  const res = await getCurrentYearReportApi()
  if (res) {
    console.log(res.data)
    currentYearReport.value = res.data
  }
}
// 本月连续三天未上传视频班组明细
const getCurrentThreeDayReport = async () => {
  const res = await getCurrentThreeDayReportApi()
  if (res) {
    console.log(res.data)
    ThreeDayReport.value = res.data
  }
}
// 本月上传视频质量不达标班组排行
const getQualityReportRanking = async () => {
  const res = await getQualityReportRankingApi()
  if (res) {
    console.log(res.data)
    QualityReport.value = res.data
  }
}

getCurrentMonthReport()
getCurrentYearReport()
getCurrentThreeDayReport()
getQualityReportRanking()
const router = useRouter()
const topath = () => {
  //定义一个路径
  const href = router.resolve({
    path: `/screen`
    // query: { key: 需要传递的值 }/screen
  }).href
  //打开新的页面 到 href 这个页面
  window.open(href, '_blank')
}

const loading = ref(true)

// const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption

// // 用户来源
// const getUserAccessSource = async () => {
//   const res = await getUserAccessSourceApi().catch(() => {})
//   if (res) {
//     set(
//       pieOptionsData,
//       'legend.data',
//       res.data.map((v) => t(v.name))
//     )
//     pieOptionsData!.series![0].data = res.data.map((v) => {
//       return {
//         name: t(v.name),
//         value: v.value
//       }
//     })
//   }
// }

// const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// // 周活跃量
// const getWeeklyUserActivity = async () => {
//   const res = await getWeeklyUserActivityApi().catch(() => {})
//   if (res) {
//     set(
//       barOptionsData,
//       'xAxis.data',
//       res.data.map((v) => t(v.name))
//     )
//     set(barOptionsData, 'series', [
//       {
//         name: t('analysis.activeQuantity'),
//         data: res.data.map((v) => v.value),
//         type: 'bar'
//       }
//     ])
//   }
// }

// const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

// // 每月销售总额
// const getMonthlySales = async () => {
//   const res = await getMonthlySalesApi().catch(() => {})
//   if (res) {
//     set(
//       lineOptionsData,
//       'xAxis.data',
//       res.data.map((v) => t(v.name))
//     )
//     set(lineOptionsData, 'series', [
//       {
//         name: t('analysis.estimate'),
//         smooth: true,
//         type: 'line',
//         data: res.data.map((v) => v.estimate),
//         animationDuration: 2800,
//         animationEasing: 'cubicInOut'
//       },
//       {
//         name: t('analysis.actual'),
//         smooth: true,
//         type: 'line',
//         itemStyle: {},
//         data: res.data.map((v) => v.actual),
//         animationDuration: 2800,
//         animationEasing: 'quadraticOut'
//       }
//     ])
//   }
// }

const getAllApi = async () => {
  //await Promise.all([getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
// setTimeout(() => {
//   loading.value = false
// }, 2000)
// getAllApi()

const exportExcelYear = () => {
  // 创建一个工作簿
  const workbook = XLSX.utils.book_new()
  // 创建一个工作表
  const worksheet = XLSX.utils.json_to_sheet(
    currentYearReport.value.map((item) => {
      return {
        部门编号: item.depNo,
        部门名称: item.depName,
        违章次数: item.count
      }
    })
  )

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 生成Excel文件
  XLSX.writeFile(workbook, '本年违章查处明细报表.xlsx')
}
const exportExcelThreeDay = () => {
  // 创建一个工作簿
  const workbook = XLSX.utils.book_new()
  // 创建一个工作表
  const worksheet = XLSX.utils.json_to_sheet(
    ThreeDayReport.value.map((item) => {
      return {
        部门编号: item.depNo,
        部门名称: item.depName,
        未上传次数: item.count
      }
    })
  )

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 生成Excel文件
  XLSX.writeFile(workbook, '本月连续三天未上传视频班组明细.xlsx')
}

const exportExcelQualityReport = () => {
  // 创建一个工作簿
  const workbook = XLSX.utils.book_new()
  // 创建一个工作表
  const worksheet = XLSX.utils.json_to_sheet(
    QualityReport.value.map((item) => {
      return {
        部门编号: item.depNo,
        部门名称: item.depName,
        不达标次数: item.count
      }
    })
  )

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 生成Excel文件
  XLSX.writeFile(workbook, '本月上传视频质量不达标班组排行.xlsx')
}
const exportExcelMonth = () => {
  // 创建一个工作簿
  const workbook = XLSX.utils.book_new()
  // 创建一个工作表
  const worksheet = XLSX.utils.json_to_sheet(
    currentMonthReport.value.map((item) => {
      return {
        部门编号: item.depNo,
        部门名称: item.depName,
        上传次数: item.count
      }
    })
  )

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 生成Excel文件
  XLSX.writeFile(workbook, '本月上传明细报表.xlsx')
}
</script>

<template>
  <!-- <div style="margin-bottom: 20px">
    <BaseButton type="primary" @click="topath">看大屏</BaseButton>
    <BaseButton type="primary" @click="guideStart">新手引导</BaseButton>
  </div> -->

  <div class="mrb-20">
    <ContentWrap title="本年违章查处明细报表">
      <template #header>
        <div class="btnbox">
          <el-button type="primary" size="default" @click="exportExcelYear">导出</el-button>
        </div>
      </template>
      <el-table :data="currentYearReport" style="width: 100%">
        <el-table-column prop="depNo" label="部门编号" />
        <el-table-column prop="depName" label="部门名称" />
        <el-table-column prop="count" label="违章次数" />
      </el-table>
    </ContentWrap>
  </div>
  <div class="mrb-20">
    <ContentWrap title="本月上传明细报表">
      <template #header>
        <div class="btnbox">
          <el-button type="primary" size="default" @click="exportExcelMonth">导出</el-button>
        </div>
      </template>
      <el-table :data="currentMonthReport" style="width: 100%">
        <el-table-column prop="depNo" label="部门编号" />
        <el-table-column prop="depName" label="部门名称" />
        <el-table-column prop="count" label="上传次数" />
      </el-table>
    </ContentWrap>
  </div>
  <div class="mrb-20">
    <ContentWrap title="本月连续三天未上传视频班组明细报表">
      <template #header>
        <div class="btnbox">
          <el-button type="primary" size="default" @click="exportExcelThreeDay">导出</el-button>
        </div>
      </template>
      <el-table :data="ThreeDayReport" style="width: 100%">
        <el-table-column prop="depNo" label="部门编号" />
        <el-table-column prop="depName" label="部门名称" />
        <el-table-column prop="count" label="未上传次数" />
      </el-table>
    </ContentWrap>
  </div>
  <div>
    <ContentWrap title="本月上传视频质量不达标班组报表">
      <template #header>
        <div class="btnbox">
          <el-button type="primary" size="default" @click="exportExcelQualityReport"
            >导出</el-button
          >
        </div>
      </template>
      <el-table :data="QualityReport" style="width: 100%">
        <el-table-column prop="depNo" label="部门编号" />
        <el-table-column prop="depName" label="部门名称" />
        <el-table-column prop="count" label="不达标次数" />
      </el-table>
    </ContentWrap>
  </div>
  <!-- <PanelGroup /> -->
  <!-- <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="pieOptionsData" :height="300" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="300" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <Echart :options="lineOptionsData" :height="350" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow> -->
</template>
<style scoped>
.btnbox {
  width: 100%;
  display: flex;
  justify-content: end;
}
.mrb-20 {
  margin-bottom: 20px;
}
</style>
